<template>
  <div class="not-found">
    <div class="not-found-content">
      <img src="@/assets/404.png" alt="404" class="not-found-image">
      <h1>404</h1>
      <h2>页面未找到</h2>
      <p>抱歉，您访问的页面不存在</p>
      <p>可能是因为：</p>
      <ul>
        <li>网址输入错误</li>
        <li>页面已被移除</li>
        <li>临时性的系统错误</li>
      </ul>
      <div class="actions">
        <el-button type="primary" @click="goBack">返回上一页</el-button>
        <el-button @click="goHome">返回首页</el-button>
      </div>
      <div class="countdown">
        {{ countdown }}秒后自动返回首页
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'NotFound',
  setup() {
    const router = useRouter();
    const countdown = ref(5);
    let timer = null;

    const startCountdown = () => {
      timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
          goHome();
        }
      }, 1000);
    };

    const goBack = () => {
      router.back();
    };

    const goHome = () => {
      router.push('/');
    };

    onMounted(() => {
      startCountdown();
    });

    onBeforeUnmount(() => {
      if (timer) {
        clearInterval(timer);
      }
    });

    return {
      countdown,
      goBack,
      goHome
    };
  }
});
</script>

<style lang="scss" scoped>
@use '@/assets/scss/_variables' as *;
@use '@/assets/scss/_mixins' as *;

.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $background-color-base;
  padding: $spacing-extra-large $spacing-base;

  &-content {
    text-align: center;
    max-width: 600px;
    padding: $spacing-extra-large;
    background-color: $background-color-white;
    border-radius: $border-radius-large;
    box-shadow: $box-shadow-base;

    .not-found-image {
      width: 200px;
      margin-bottom: $spacing-large;
    }

    h1 {
      font-size: 120px;
      color: $primary-color;
      margin-bottom: $spacing-base;
      line-height: 1;
    }

    h2 {
      font-size: $font-size-extra-large;
      color: $text-primary;
      margin-bottom: $spacing-base;
    }

    p {
      font-size: $font-size-base;
      color: $text-regular;
      margin: $spacing-extra-small 0;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0 0 $spacing-extra-large;
      color: $text-regular;

      // li {
      //   margin: $spacing-mini 0;
      // }
    }

    .actions {
      display: flex;
      justify-content: center;
      gap: $spacing-base;
      margin-bottom: $spacing-large;
    }

    .countdown {
      color: $text-secondary;
      font-size: $font-size-small;
    }

    .back-home {
      display: inline-block;
      margin-top: $spacing-large;
      padding: $spacing-small $spacing-large;
      background: $primary-color;
      color: $background-color-white;
      border-radius: $border-radius-base;
      text-decoration: none;
      transition: $transition-base;

      &:hover {
        background: darken($primary-color, 10%);
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .not-found {
    padding: $spacing-base;
  }

  .not-found-content {
    padding: $spacing-large;

    .not-found-image {
      width: 150px;
    }

    h1 {
      font-size: 48px;
    }

    h2 {
      font-size: $font-size-large;
    }

    .actions {
      flex-direction: column;
      gap: $spacing-small;
    }
  }
}
</style> 